<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
        <div class="full-width" id="mul_select">
        <el-form :inline="true" size="small" :ref="search">
          <el-form-item>
             <el-input size="small" placeholder="请输入尺码模板名称" v-model.trim="search.title" maxlength="40" clearable></el-input>
          </el-form-item>
          <el-form-item>
             <el-select size="small" placeholder="请选择是否禁用" v-model.trim="search.status" maxlength="40" clearable>
               <el-option :value="0" label="禁用">禁用</el-option>
               <el-option :value="1" label="启用">启用</el-option>
             </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
            <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="success" icon="el-icon-document-add" size="mini" @click="addOrEditOption(1, '')" v-if="roleBtns.includes('sys:size:add') || $store.getters.isAdmin">新建模板</el-button>
        <!-- <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeSelectOption()" v-if="roleBtns.includes('sys:goods_price:remove') || $store.getters.isAdmin">批量删除</el-button> -->
      </div>
      <el-table class="margin_top_20" :data="pageData" stripe @selection-change="handleSelectionChange" :header-cell-style="tableHeaderStyle" v-loading="loading">
        <!-- <el-table-column type="selection" width="42"></el-table-column> -->
        <el-table-column prop="title" label="尺码模板"></el-table-column>
        <el-table-column prop="categoryList" label="已绑定分类">
           <template slot-scope="scope">
            <span v-if="scope.row.categoryList.length">已绑定</span>
             <!-- v-for="item in scope.row.categoryList" :key="item.id"  -->
            <span v-else class="selectSize">未绑定</span>
          </template>
        </el-table-column>
        <el-table-column prop="selectionSize" label="尺码数据" width="400">
           <template slot-scope="scope">
            <span v-for="item in scope.row.selectSizeList" :key="item.sizeName" class="selectSize">{{item.sizeName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启用/禁用">
          <template slot-scope="scope">
            <el-switch @change="changeSizeStatus(scope.row, scope.$index)" :value="scope.row.statusBoolean"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(3, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">查看</button>
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(2, scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">编辑</button>
            <button class="my-btn my-btn--mini my-btn--danger plain" @click="deleteOption(scope.row.id)" v-if="roleBtns.includes('sys:size:delete') || $store.getters.isAdmin">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页面页脚 -->
    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </div>

    <size-form :visible.sync="isShowModel" :isEditMode="isEditMode" :title="title" :size="selectSize" @update="getPageDataList()"></size-form>
  </div>
</template>

<script>
import Setting from '@/settings'
import { mapGetters } from 'vuex'
import SizeForm from '@/views/store-management/components/sizeListForm'
import { GetSizeList, RemoveSizeModules, UpdateSizeStatus } from '@/views/store-management/services/index'

export default {
  name: 'StorePrice',
  components: {
    SizeForm,
  },
  data() {
    return {
      queryName: '',
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      selectSize: '',
      multipleSelection: [],
      multipleSelectionIds: '',
      pageCount: 0,
      loading: false,
      isShowModel: false,
      isEditMode: false,
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      search: {
        title: '',
        status: null
      }
      
    }
  },
  computed: {
    ...mapGetters(['roleBtns']),
    title() {
      if (!this.isEditMode) {
        return '新建尺码模板'
      } else {
        return '编辑尺码模板'
      }
    },
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    // 新增和编辑按钮
    addOrEditOption(type, row) {
      if (type === 1) {
        this.isShowModel = true
        this.isEditMode = false
        this.selectSize = ''
      } else if (type === 2){
        this.isShowModel = true
        this.isEditMode = true
        this.selectSize = row
        // this.renderFormByData(row);
      }else {
        this.isShowModel = true
        this.isEditMode = false
        this.selectSize = row
      }
    },
    // 修改模板启用状态
    changeSizeStatus(row, index) {
      row.status = Number(row.status) == 0 ? 1 : 0
      UpdateSizeStatus({
        id: row.id,
        status: row.status,
      })
        .then(data => {
          if (data.code == 200) {
            // this.$set(this.pageData, index, row);
            this.$message.success('修改成功!')
            row.statusBoolean = !row.statusBoolean
          } else {
            this.$message({
              type: 'error',
              message: '修改失败!',
            })
          }
          this.getPageDataList()
        })
        .catch(error => {
          this.$message({
            type: 'error',
            message: '修改失败!',
          })
        })        
    },

    // 单行删除操作
    deleteOption(rowId) {
      this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            RemoveSizeModules({ targetIds: rowId })
              .then(data => {
                instance.confirmButtonLoading = false
                if (data.code == 200) {
                  done()
                  this.$message.success('删除成功!')
                  this.getPageDataList()
                } else {
                  this.$message.error('删除失败!')
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false
              })
            done()
          } else {
            done()
          }
        },
      })
    },
    //批量删除操作
    removeSelectOption() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的价格模板!')
        return
      }
      this.$confirm('是否确认要移除所选中的价格模板，移除后此价格模板不在列表中显示?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            RemovePriceList({ targetIds: this.multipleSelectionIds.join(',') })
              .then(data => {
                instance.confirmButtonLoading = false
                if (data.code == 200) {
                  done()
                  this.$message.success('删除成功!')
                  this.getPageDataList()
                } else {
                  this.$message.error('删除失败!')
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        },
      })
    },
    // 重置操作
    resetOption() {
      this.search.title = ''
      this.search.status = null
      this.pageIndex = 1
      this.getPageDataList()
    },

    // 获取页面列表数据
    getPageDataList() {
      this.loading = true
      GetSizeList({
        pageSize: this.pageSize,
        pageNum: this.pageIndex,
        search: this.search.title,
        status: this.search.status
      })
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list.map(item => {
              item.statusBoolean = !!item.status
              item.selectSizeList = JSON.parse(item.selectionSize)
              return item
            })
            this.pageCount = data.data.total;
             if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
                this.pageIndex = 1;
                this.getPageDataList();
              }
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
        .catch(error => {
          this.loading = false
        })
    },

    // 分页列表改变
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },

    //选择列表中的某些项
    handleSelectionChange(event) {
      this.multipleSelection = event
      this.multipleSelectionIds = this.multipleSelection.map(aa => {
        return aa.id
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.selectSize {
  margin-right: 10px;
}
</style>
